<template>
  <div>
    <hr />
        <router-link class="a" to="/home">主页</router-link>
        <router-link class="b" to="/about">About页面</router-link>
        <router-link to="/about/one">about第一层1</router-link>
        <router-link to="/about/two">about第一层2</router-link>
        <router-view></router-view>
    <hr />
  </div>
</template>

<script>
export default {
    name:'route'
};
</script>

<style scoped>

    .a{
        color:red;
        margin-left: 20px;
        margin-right: 20px;
        border: 1px yellow solid;
        text-decoration: none;
    }

    .b{
        color:red;
        margin-left: 20px;
        margin-right: 20px;
        border: 1px blue solid;
        text-decoration: none;
    }

</style>